<style lang="less">
</style>

<template>
<div><Modal v-model="addmodal" :title="modaltitle" @on-ok="addLinks">
        <i-Form :model="editData" :label-width="100">
            <Form-item label="链接名称">
                <i-Input type="text" v-model="editData.title" placeholder="链接名称"></i-Input>
            </Form-item>
            <Form-item label="链接地址">
                <i-Input type="text" v-model="editData.url" placeholder="链接地址">
                </i-Input>
            </Form-item>       
            <Form-item label="设备">
                <i-Select v-model="edittype">
                    <Option v-for="item in linktypes" :value="item.ID" :key="item.ID">{{item.title}}</Option>
                </i-Select>  
            </Form-item>     
                       
            <Form-item label="图片">
                 <row>
                    <i-col span="20">
                <i-Input type="text" v-model="editData.img" placeholder="图片">
                </i-Input></i-col>
                    
                <i-col span="4" style="text-align:center">                    
                    <Upload 
                        ref="bannerupload"
                        :show-upload-list="false"
                        :on-success="handlebannerSuccess"
                        :format="['jpg','jpeg','png','gif']"
                        :max-size="2048"
                        :on-format-error="handleFormatError"
                        :on-exceeded-size="handleMaxSize"
                        :action="action">
                    <i-button>上传</i-button>
                    </Upload></i-col>
                </row>
            </Form-item>       
            <Form-item label="到期时间">
                 <Date-picker type="datetime" v-model="editData.endtime" format="yyyy-MM-dd HH:mm:ss" placeholder="到期时间" style="width: 200px"></Date-picker>
            </Form-item>      
            <Form-item label="排序">
                <i-Input type="text" v-model="editData.ordnum" placeholder="排序">
                </i-Input>
            </Form-item>
        </i-Form>
    </Modal>
 <Card>  
        <p slot="title">
            <Icon type="navicon-round"></Icon>
            友情链接管理
        </p>       
        <row>
            <i-col span="6">
                <Button-group>
                    <Button @click="showaddmodal()">添加</Button>
                    <Button @click="saveordnum">保存排序</Button>
                    <Button @click="delduo">批量删除</Button>
                </Button-group>
            </i-col>
            <i-col span="4">                
                <i-Select v-model="pageinfo.type" @on-change="typechange">
                    <Option v-for="item in types" :value="item.ID" :key="item.ID">{{item.title}}</Option>
                </i-Select>
            </i-col>
            <i-col span="14">  
            </i-col>
        </row>
    <div style="margin-top:10px"></div>
    <i-table :columns="cols" :data="data" stripe @on-selection-change="setselect" @on-sort-change="setorder" ></i-table>
    
    <div style="margin-top:10px; text-align:center">
    <Page :total="pageinfo.total" :page-size="pageinfo.pagesize" show-sizer @on-change="pagechange" @on-page-size-change="pagesizechange"></Page></div>
    </Card>
    </div>
</template>

<script>
import api from '../../libs/api';
export default {
    name: 'content_links',
    data () {
        return {
            action:wlfData.serverurl+"/upload/index",
            addmodal:false,
            cols:[{
                    type: 'selection',
                    width: 40,
                    align: 'center'
                },{
                    title: 'ID',
                    key: 'ID',
                    width:70,
                    sortable:'custom'
                }, {
                    title: '标题',
                    key: 'title',
                    align:'left',
                    sortable:'custom',
                    render:(h,params)=>{
                        return h('Button',
                                    {
                                        props: {
                                            type: 'text',//无边框，像文字格式
                                            size: 'small',
                                        },
                                        on: {
                                            click: () => {         
                                                this.showaddmodal(Object.assign({},params.row));
                                            }
                                        }
                                    },
                                    params.row.title)
                    }
                },{
                    title: '链接',
                    key: 'url',
                    align:'left',
                    sortable:'custom'
                },{
                    title: '排序',
                    key: 'ordnum',
                    align:'center',
                    width:80,
                    render:(h,params)=>{
                        return h('Input',{
                            props:{
                                value:params.row.ordnum
                            },
                            on:{
                                'on-blur':(event) => {
                                    this.data[params.index].ordnum = event.target.value;
                                }
                            },
                        })
                    }
                },
                {
                    title: '设备',
                    key: 'ismobile',
                    align:'center',
                    render:(h,params)=>{
                        var state="PC";
                        if(params.row.ismobile)
                        {
                            state="手机";
                        }
                        return h("span",state);
                    }
                },
                {
                    title: '状态',
                    key: 'endtime',
                    align:'center',
                    render:(h,params)=>{
                        var state="过期";
                        var color="red";
                        if(new Date(Date.parse(params.row.endtime))>new Date())
                        {
                            state="正常";
                            color="green";
                        }
                        return h("span",{attrs:{style:'color:'+color}},state);
                    }
                },
                {
                    title: '操作',
                    key: 'action',
                    align: 'center',
                        width:'120px',
                    render: (h, params) => {
                        return h('div',
                            [
                                h('Button',
                                    {
                                        props: {
                                            //type: 'text',//无边框，像文字格式
                                            size: 'small',
                                        },
                                        on: {
                                            click: () => {         
                                                this.showaddmodal(Object.assign({},params.row));
                                            }
                                        }
                                    },
                                    '编辑'),
                                    h('span',' '),
                                h('Button',
                                    {
                                        props: {
                                            //type: 'text',//无边框，像文字格式
                                            size: 'small',
                                        },
                                        on: {
                                            click: () => {
                                                this.dellinks(params.index);
                                            }
                                        }
                                    },
                                    '删除')
                            ])
                    }
                }],
            data:[],
            pageinfo:{page:1,pagesize:20,total:0,order:"ordnum",esc:"desc",key:''},
            editData:{img:'',ordnum:99},
            //targets:[{"title":"当前页","value":"_self"},{"title":"顶窗口","value":"_top"},{"title":"新窗口","value":"_blank"}],
            selectdata:[],
            modaltitle:"添加",
            types:[{title:"默认",ID:0},{title:"PC",ID:1},{title:"手机",ID:2}],
            linktypes:[{title:"PC",ID:1},{title:"手机",ID:2}],
            edittype:0
        };
    },
    methods:{
        typechange(id){
            this.pageinfo.type=id;
            this.init();
        },
        pagesizechange(pagesize){
            this.pageinfo.pagesize=pagesize;
            this.init();
        },
        pagechange(page){
            this.pageinfo.page=page;
            this.init();
        },
        handlebannerSuccess(res,file){
            var vm=this;
                vm.editData.img=res.msg.url;
        },
        handleFormatError (file) {
            this.$Notice.warning({
                title: '文件格式不正确',
                desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
            });
        },
        handleMaxSize (file) {
            this.$Notice.warning({
                title: '超出文件大小限制',
                desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
            });
        },
        handleBeforeUpload () {
            const check = this.uploadList.length < 5;
            if (!check) {
                this.$Notice.warning({
                    title: '最多只能上传 5 张图片。'
                });
            }
            return check;
        },
        setorder(column){
            if(column.order=="normal"){
            this.pageinfo.order="ordnum";
            this.pageinfo.esc="desc";
            }
            else{
            this.pageinfo.order=column.key;
            this.pageinfo.esc=column.order;
            }
            this.init();
        },
        dellinks(index){
            var vm=this;            
            api.post("/links/del?id="+vm.data[index].ID).then(function(res){
                if(res.data.code==200){
                    vm.$Message.success(res.data.msg);
                }
                else{
                    vm.$Message.error(res.data.msg);
                }
                vm.init();
            })
        },
        setselect(selection){
            this.selectdata=selection;
        },
        saveordnum(){
            var vm=this;
            api.post("/links/saveordnum",this.data).then(function(res){
                if(res.data.code==200){
                    vm.$Message.success("排序完成！");
                }
                else{
                    vm.$Message.error("排序失败！");
                }
                vm.init();
            })
        },
        delduo(){
            var vm=this; 
            api.post("/links/delall",{data:this.selectdata}).then(function(res){
                if(res.data.code==200){
                    vm.$Message.success("删除成功！");
                }
                vm.init();
            })
        },
        showaddmodal(model){
            this.modaltitle="编辑链接";
            if(model==undefined){
                var now = new Date();
                now.setFullYear(now.getFullYear()+1);
                this.editData={img:'',ordnum:99,calssid:0,endtime:now,ismobile:1};
            }
            else{
                this.editData=model;
                this.edittype=model.ismobile?2:1;
            }
            this.addmodal=true;
        },
        addLinks(){
            var vm=this;            
            // var now=this.editData.endtime;
            // var endtime=now.getFullYear()+"-"+(now.getMonth()+1)+"-"+now.getDate()+" "+now.getHours()+":"+now.getMinutes()+":"+now.getSeconds();
            // this.editData.endtime=endtime;
            this.editData.ismobile=this.edittype==2;
            api.post("/links/save",this.editData).then(function(res){
                if(vm.editData.ID>0)
                    vm.$Message.success("修改成功！");
                else                    
                    vm.$Message.success("添加成功！");
                vm.addmodal=false;
                vm.init();
            })
        },
        init(){
            var vm=this;
            api.post("/links/getpagelist?t="+new Date().getSeconds(),this.pageinfo).then(function(res){
                var linkslist=res.data.msg.Items;                
                vm.data=linkslist;
                vm.pageinfo.total=res.data.msg.TotalItems;
            })
        }
    },
    created(){
        this.init();
    }
};
</script>
